<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        基本知识：
        过滤器的分类： 局部过滤器  写在配置对象中
                      全局过滤器  Vue 构造函数中
        用途：1、用在mustach语法中
              2、用在v-bind表达式后面
     -->
     <div class="box">
        <!-- 用到了mustach语法中 -->
        <h1>{{msg|upper}}</h1>
        <!-- 用到了v-bind 表达式中 -->
        <h1 :title="msg|upper">♥</h1>
     </div>
     <div class="box1">
        <h1>{{msg1|test}}</h1>
     </div>
     <script>
        //设置全局过滤器
        Vue.filter('test',(value)=>{
            return value.toUpperCase();
        })
        const vm = new Vue({
            el:'.box',
            data:{
                msg:'hello word!'
            },
            //设置局部过滤器
            filters:{
                upper(value){
                    value=value.toUpperCase();
                    return value
                }
            }
        });
        const vm1 = new Vue({
            el:'.box1',
            data:{
                msg1:'nihao!'
            }
        })
     </script>
</body>
</html>